<template>
	<view class="goodslist_content">
		<view @click.stop="goExchangPage(item.id)" class="goodcard" v-for="item in farmerCommodityList" :key="item.id">
			<image class="goods_img" :src="item.imgUrl" alt="" />
			<view class="text">
				<view class="name"><text class="youxuan"> 优选 </text>{{ item.name }}</view>
				<view class="tokenPrice">
					<view class="left">
						<text class="red">{{ item.consumeNum }} {{ $tokenName }}</text>
					</view>
					<view class="right1">
						立即兑换
					</view>
				</view>
			</view>
		</view>
		<view v-if="haMore" style="
        text-align: center;
        color: #999;
        padding-bottom: 10rpx;
        height: 50px;
				line-height: 50px;
      ">
			正在加载...
		</view>
		<view v-if="!haMore" style="
        text-align: center;
        color: #999;
        padding-bottom: 10rpx;
        height: 50px;
				line-height: 50px;
      ">
			没有更多了
		</view>
	</view>
</template>

<script>
	import {
		getFarmerCommodityList
	} from '@/apis/first'
	import {
		getUserInfo
	} from '@/utils/auth'
	export default {
		name: 'GoodsList',
		// props:['farmerCommodityList','haMore'],
		data() {
			return {
				// farmerCommodityList: [],
				userInfo: {},
				farmerCommodityList: [],
				page: {
					pageNum: 1,
					pageSize: 10
				},
				isEmpty: false,
				haMore: true,
			}
		},
		computed:{
			$tokenName(){
				return this.$config.tokenName
			}
		},
		mounted() {
			this.getFarmerCommodityList()
		},
		methods: {
			async getFarmerCommodityList(hasMore) {
				if(hasMore){
					this.haMore = true;
					this.farmerCommodityList = [];
					this.page.pageNum = 1;
					this.isEmpty = false;
				}
				console.log("获取列表！！！");
				// this.haMore = true
				if (!this.haMore) return
				const res = await getFarmerCommodityList({
					...this.page
				})
				if (res.code === 200) {
					const data = res.data
					// 如果是第一页，则清空数据
					if (this.page.pageNum === 1) {
						this.farmerCommodityList = []
					}
					// 添加数据
					this.farmerCommodityList = [...this.farmerCommodityList, ...data.list]
					// 判断是否为空数组
					this.isEmpty = this.farmerCommodityList.length === 0
					if(this.haMore){
						// 计算下一页页码
						this.page.pageNum = ++data.pageNum
					}
					// console.log(data)
					// 判断是否还有下一页数据
					this.haMore = data.hasNextPage
					// if (!this.haMore) uni.utils.toast('没有更多数据了')
					console.log('farmerCommodityList响应', this.farmerCommodityList)
				} else {
					// console.log(res)
					// uni.utils.toast('获取列表失败')
				}
			},
			// async getFarmerCommodityList(pageNum, pageSize) {
			//   // this.haMore = true
			//   if (!this.haMore) return
			//   const res = await getFarmerCommodityList({ ...this.page })
			//   if (res.code === 200) {
			//     const data = rsaDecrypt(res.data.data)
			//     // 如果是第一页，则清空数据
			//     if (this.page.pageNum === 1) {
			//       this.farmerCommodityList = []
			//     }
			//     // 添加数据
			//     this.farmerCommodityList = [...this.farmerCommodityList, ...data.list]
			//     // 判断是否为空数组
			//     this.isEmpty = this.farmerCommodityList.length === 0
			//     // 计算下一页页码
			//     this.page.pageNum = ++data.pageNum
			//     console.log(data)
			//     // 判断是否还有下一页数据
			//     this.haMore = this.page.pageNum <= data.pages
			//     // if (!this.haMore) uni.utils.toast('没有更多数据了')
			//     console.log(this.farmerCommodityList, 'farmerCommodityList')
			//   } else {
			//     // console.log(res)
			//     // uni.utils.toast('获取列表失败')
			//   }
			// },
			// notToken() {
			//   uni.utils.toast('通证数量不够')
			// },
			goExchangPage(id) {
				this.userInfo = getUserInfo()
				uni.navigateTo({
					url: '/packageA/pages/exchangeGoods/index?farmerCommodityId=' +
						id +
						'&memberId=' +
						this.userInfo.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.goodslist_content {
		.goodcard {
			display: flex;
			padding: 40rpx 0;
			border-bottom: 2rpx solid #eee;
			.goods_img {
				width: 200rpx;
				border-radius: 12rpx;
				height: 200rpx;
				margin-right: 20rpx;
			}

			.text {
				// width: 50%;
				flex: 1;

				.name {
					margin-bottom: 104rpx;
					font-size: 16px;
					vertical-align: middle;
					font-size: 28rpx;

					.youxuan {
						width: 56rpx;
						height: 40rpx;
						padding: 4rpx;
						margin-right: 20rpx;
						background: #281b00;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-size: 24rpx;
						color: #fffdec;
					}
				}

				.tokenPrice {
					font-size: 40rpx;
					font-weight: 700;
					display: flex;

					.left {
						// width: 60%;
						flex: 1;
						// margin-right: 100rpx;
					}

					.red {
						color: #E53F26;
					}

					.right1 {
						font-size: 28rpx;
						text-align: center;
						line-height: 60rpx;
						width: 192rpx;
						height: 60rpx;
						font-weight: bold;
						background: linear-gradient(to right,#f38337,#f66524);
						box-shadow: inset 0rpx -8rpx 8rpx 0rpx rgba(223, 111, 26, 0.3);
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						color: #ffffff;
						// opacity: 0.2;
					}

					.right2 {
						font-size: 28rpx;
						width: 192rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						font-weight: bold;
						background: rgba(255, 156, 56, 0.3);
						box-shadow: inset 0rpx -8rpx 8rpx 0rpx rgba(255, 156, 56, 0.3);
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						color: #fff;
						// transparent: 0.3;
					}
				}
			}
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
</style>